<script setup lang="ts">
import { ref } from "vue"
import { useMainStore } from "@/store"
defineProps({
  msg: String
})

const count = ref(0)

const mainStore = useMainStore()
const add = () => {
  mainStore.$patch({
    firstName: "江",
    lastName: "苏",
    view: "拙政园",
    count: mainStore.count + 1
  })
}
</script>

<template>
  <div class="pinia">
    -------------子组件----------------
    <h1>{{ msg }}</h1>
    <span class="test">100年</span>
    <button type="button" @click="count++">本组件count is: {{ count }}</button>
    &nbsp;
    <button type="button" @click="add">向父pinia $patch</button>
    <button type="button" @click="mainStore.addAmount(2)">
      向父pinia $patch + 2
    </button>
  </div>
</template>

<style scoped lang="scss">
.test {
  color: $themeColor;
}
.pinia {
  border: 1px solid #ccc;
}
</style>
